<template>
  <div class="little-device">
    <div class="device-header">
      <h4 class="device-name">{{ deviceData.probe_name }}</h4>
      <button class="details-button" @click="navigateToDetails">查看详情</button>
      <span v-if="deviceData.state === 1" class="online-status">在线</span>
      <span v-else class="offline-status">离线</span>
    </div>
    
    <div class="device-body">
      <div class="device-row">
        <div class="device-info" v-if="deviceData.ele_data && deviceData.ele_data[0]">
          <span class="device-label">电流:</span>
          <span class="device-value">{{ deviceData.ele_data[0].current / 1000 }} A</span>
        </div>
        <div class="device-info" v-if="deviceData.ele_data && deviceData.ele_data[0]">
          <span class="device-label">电压:</span>
          <span class="device-value">{{ deviceData.ele_data[0].voltage }} V</span>
        </div>
        <div class="device-info" v-if="deviceData.ele_data && deviceData.ele_data[0]">
          <span class="device-label">功率:</span>
          <span class="device-value">{{ deviceData.ele_data[0].active_power }} W</span>
        </div>
      </div>
      <div class="device-row">
        <div class="device-info" v-if="deviceData.ele_data && deviceData.ele_data[0]">
          <span class="device-label">功率因数:</span>
          <span class="device-value">{{ deviceData.ele_data[0].power_factor }}%</span>
        </div>
        <div class="device-info" v-if="deviceData.ele_data && deviceData.ele_data[0]">
          <span class="device-label">温度:</span>
          <span class="device-value">{{ deviceData.ele_data[0].temperature }} ℃</span>
        </div>
        <div class="device-info full-width">
          <span class="device-label">用电量:</span>
          <span class="device-value">{{ deviceData.total_ele_quantity }} 度</span>
        </div>
      </div>
    </div>
    <div class="device-scores">
      <div class="score-block">
        <span class="score-label">状态评分:</span>
        <div class="score-bar">
          <div class="score-bar-inner" :style="{ height: `${scores.state}%`, backgroundColor: 'green' }"></div>
        </div>
        <span class="score-value">{{ scores.state }}</span>
      </div>
      <div class="score-block">
        <span class="score-label">健康评分:</span>
        <div class="score-bar">
          <div class="score-bar-inner" :style="{ height: `${scores.health}%`, backgroundColor: 'blue' }"></div>
        </div>
        <span class="score-value">{{ scores.health }}</span>
      </div>
      <div class="score-block">
        <span class="score-label">失效评分:</span>
        <div class="score-bar">
          <div class="score-bar-inner" :style="{ height: `${scores.failure}%`, backgroundColor: 'red' }"></div>
        </div>
        <span class="score-value">{{ scores.failure }}</span>
      </div>
    </div>
    <div class="abnormal-events">
      <ul> <!-- 添加ul标签以包含li元素 -->
        <li v-for="event in abnormalEvents" :key="event.id" class="event-item">
          <span class="event-timestamp">{{ event.timestamp }}</span>
          <span class="event-description">{{ event.description }}</span>
        </li>
      </ul> <!-- 添加闭合ul标签 -->
    </div>
    
  </div>
</template>

<script setup>
import { defineProps, reactive } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps(['deviceId', 'deviceData']);
const router = useRouter();

const scores = reactive({
  state: 75,  // 75% 状态评分
  health: 85, // 85% 健康评分
  failure: 45 // 45% 失效评分
});
console.log("scores",scores)
const abnormalEvents = reactive([
  { id: 1, timestamp: '2023-01-01 10:30', description: '电流异常' },
  { id: 2, timestamp: '2023-01-02 15:45', description: '温度过高' },
  { id: 3, timestamp: '2023-01-03 08:20', description: '电压波动' },
  // Add more events as needed
]);
abnormalEvents.forEach(event => {
  console.log(event);
});
const navigateToDetails = () => {
  router.push({ path: '/homePage', query: { deviceId: props.deviceId } });
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.little-device {
  flex-shrink: 0;
  border: 2px solid #00d1b2;
  padding: 16px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #2a2c42, #2a2c42);
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: auto;
  height: 260px; /* Adjusted height */
  width: 290px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.little-device:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-name {
  font-weight: bold;
  color: #00d1b2;
  font-size: 1.2em;
}

.details-button {
  background-color: #00d1b2;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
}

.details-button:hover {
  background-color: #009b92;
}

.online-status {
  color: #00ff00;
  font-weight: bold;
}

.offline-status {
  color: #ff0000;
  font-weight: bold;
}

.device-body {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
}

.device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.device-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.device-info.full-width {
  border-right: none;
}

.device-label {
  color: #00d1b2;
  font-weight: 500;
}

.device-value {
  color: #ffffff;
}

.device-scores {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px; /* Adjusted width */
}

.score-label {
  color: #ffffff;
  margin-bottom: 5px;
  text-align: center;
}

.score-bar {
  width: 20px;
  height: 50px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  position: relative;
}

.score-bar-inner {
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 5px;
}

.score-value {
  color: #ffffff;
  text-align: center;
}

body {
  background-color: #0e0e0e;
  font-family: 'Roboto', sans-serif;
}
.abnormal-events {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.events-heading {
  color: #ffffff;
  font-size: 1em;
  margin-bottom: 5px;
}

.events-list {
  list-style-type: none;
  padding: 0;
}

.event-item {
  margin-bottom: 5px;
}

.event-timestamp {
  color: #00d1b2;
  margin-right: 10px;
}

.event-description {
  color: #ffffff;
}
</style>